<template>
  <div id="review">
    <div class="review__box">
      <!-- <pull-to :bottom-load-method="refresh" :bottom-config='bottomConfig'> -->
        <router-link to="/reviewDetail">
      <div class="review-cells">
          <div class="review-title">
              <div class="review-title__hd">
                <h3>唐山打储</h3>
              </div>
              <div class="review-title__bd">
                <p class="omit">俱乐部ID：895476（AA付费1房卡/人）</p>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd">
                <p class="omit">唐山打储</p>
              </div>
              <div class="review-cell__ft">
                <p class="omit">对战时间：<span>2017-10-25 13:54:36</span></P>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd omit">
                <p>房间号</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字1111111</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd omit">
                <p>556860</p>
              </div>
              <div class="review-cell__bd">
                <p>-24</p>
              </div>
              <div class="review-cell__bd">
                <p>48</p>
              </div>
              <div class="review-cell__bd">
                <p>-24</p>
              </div>
              <div class="review-cell__bd">
                <p>0</p>
              </div>
          </div>
      </div>
     </router-link>
      <!-- 附加数据 -->
      <div class="review-cells">
          <div class="review-title">
              <div class="review-title__hd">
                <h3>唐山打储</h3>
              </div>
              <div class="review-title__bd">
                <p class="omit">俱乐部ID：895476（AA付费1房卡/人）</p>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd">
                <p class="omit">唐山打储</p>
              </div>
              <div class="review-cell__ft">
                <p class="omit">对战时间：<span>2017-10-25 13:54:36</span></P>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd omit">
                <p>房间号</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字1111111</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
              <div class="review-cell__bd">
                <p>很长的名字</p>
              </div>
          </div>
          <div class="review-cell">
              <div class="review-cell__hd omit">
                <p>556860</p>
              </div>
              <div class="review-cell__bd">
                <p>-24</p>
              </div>
              <div class="review-cell__bd">
                <p>48</p>
              </div>
              <div class="review-cell__bd">
                <p>-24</p>
              </div>
              <div class="review-cell__bd">
                <p>0</p>
              </div>
          </div>
      </div>

<!-- </pull-to> -->
    </div>
  </div>
</template>

<script>
    import axios from 'axios'
    import utils from '../../scripts/utils'
    // import PullTo from 'vue-pull-to'
    export default {
        data(){
            return{
              //上拉刷新配置参数
              // bottomConfig:{
              //   pullText: '上拉加载',
              //   triggerText: '释放更新',
              //   loadingText: '加载中...',
              //   doneText: '加载完成',
              //   failText: '加载失败',
              //   loadedStayTime: 400,
              //   stayDistance: 50,
              //   triggerDistance: 70
              // }
            }
        },
        created(){
           //初始化数据
          //  this.getReview();
        },
        methods: {
            getReview:function(){
                axios.post('/api/mobile/getReview')
                .then((res) => {
                  console.log(res)
                })
                .catch(function (error){
                    console.log(error);
                });
            },
          //   refresh:(loaded)=> {
          //     console.log('我是上拉刷新')
          //     setTimeout(() => {
          //       loaded('done');
          //     }, 2000);
          // }
        },
        // components: {
        //   PullTo
        // },
    }
</script>

<style scoped>
    .flex{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .omit{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    #review{
      color:#fff;
      overflow: auto;
      height: 95%;
    }
  a{
    color: #fff;
  }
  .review-cells {
    margin: .25rem .25rem .125rem;
    line-height: 1;
    overflow: hidden;
    position: relative;
    background-color: rgba(18, 69, 107, 0.1);
    border-radius: 0.1rem;
    box-shadow: 0 0 0.1rem #2eaee1;
  }
  .review-cells p{
    font-size:.2rem;
  }
  .review-title{
    overflow: hidden;
    line-height: .5rem;
    }
  .review-title div{
    float:left;
  }
  .review-title__hd{
    width:35%;
    background: url("../images/biaogebiaoti003.png") center no-repeat;
    background-size: 100% 100%;
  }
  .review-title__hd h3{
    padding:0 10px;
    font-size:.35rem;
  }
  .review-title__bd{
    width:65%;

  }
  .review-cell{
    padding: 10px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .review-cell:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #2eaee1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
  }

  .review-cell__hd {
    width:20%;
    text-align: left;
  }

  .review-cell__bd {
    text-align: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .review-cell__bd{
    max-width:20%;
  }
  .review-cell__bd p{
    padding:0 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .review-cells .review-cell:nth-child(3) .review-cell__bd{
    color:rgb(253,233,201);
  }
  .review-cell__ft span{
    color:rgb(238,255,197);
    }
  .review-cell__ft {
    padding-left:20px;
    text-align: right;
  }
</style>
